<template>
  <div id="index">
    <!-- 全屏显示 -->
    <div class="btn">
      <span style="color:#918F8F" @click="clickFun">
        <!-- <img :src="isFullFlag" style="vertical-align:middle" /> -->
        <el-button type="primary" icon="el-icon-monitor" plain size="mini" style="margin-bottom: 5px">全屏显示</el-button>
      </span>
    </div>
    <div class="cockpit" id="content">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="container" style="width: 100%">
        <!-- 顶部 -->
        <div class="title" style="margin-top: 20px">
          <div class="time" style="width: 33.3%;border-top: 2px #568aea solid; ">
            <!-- <div style="width: 70%;height:5px; border-top: 2px #568aea solid; margin-right: 10px; float: right;"></div> -->
            <!-- <dv-decoration-10 class="d-flex jc-center" style="height:5px" /> -->
            <p class="now_time" style="color: #fff;" v-html="formateTimeStamp(date)"></p>
          </div>
          <dv-decoration-8 :color="['#568aea', '#568aea']" class="d-flex jc-center" style="width:300px;height:50px;" />
          <div class="title_name">
            <h1 style="font-style: normal; color: #fff">发泡蜡车间</h1>
            <dv-decoration-5 :dur=NaN class="tit_center" :color="['#568aea', '#568aea']" />
            <div style="width:300px;height:10px;border-top: 4px #568aea solid; margin-top: -40px; ">
              <!-- <div  style="width:200px;height:40px;border-top: 2px #568aea solid; margin-bottom: -50px; " >
              </div> -->
            </div>


          </div>
          <dv-decoration-8 :color="['#568aea', '#568aea']" :reverse="true" style="width:300px;height:50px;" />
          <!-- <dv-decoration-10 class="dv-dec-10-s" style="width: 33.3%;height:5px" /> -->
          <div style="width: 33.3%;height:5px; border-top: 2px #568aea solid;">
            <!-- <hr style="width:90%; margin-top: 1px; float: left; background-color: white; margin-left: 10px;"> -->
          </div>
        </div>
        <!-- 订单 -->
        <div class="border-box-content" style="margin-top: 20px">
          <dv-border-box-12 ref='order'>
            <span>在产/待产订单信息</span>
            <div id="order">
              <dv-scroll-board :config="config2" style="width:100%;height:90px;" />
              <dv-scroll-board :config="config1" style="width:100%;height:140px;" />
            </div>
          </dv-border-box-12>
        </div>
        <!-- 第二行 -->
        <div class="content1" style="margin-top: 20x">
          <div class="border-box-content zhiliang">
            <dv-border-box-10>
               <span>质量统计</span>
               <span style="color:white;font-size:18px;margin-left:25%;">
               今日总合格率：{{ defectiveRes.rate }}&nbsp;
              问题总数：{{ defectiveRes.defectiveCount }}
            </span>
           
            <div class="zl">
              <dv-border-box-6 ref="boxmini" v-for="(item,index) in defectiveList" :key="index" class="box" >
                <p style="text-align:center;margin-top:4%">{{item.name}}</p>
                <div class="boxmini">
                  <div class="num">
                    <p>数量</p>
                    <p>{{ item.defectiveCount }}</p>
                 </div>
                 <div class="bi">
                    <p>问题总数占比</p>
                    <p>{{ item.rate }}</p>                   
                 </div>
                </div>                
              </dv-border-box-6>
            </div>
           
            </dv-border-box-10>
          </div>
          <div class="border-box-content">
            <dv-border-box-10 style="width: 100%">
              <span>蜡池温度</span>
              <div id="oil" style="width: 100%; height: 90%"></div>
            </dv-border-box-10>
          </div>
          <div class="border-box-content">
            <dv-border-box-10>
              <span>制冷温度</span>
              <div id="refrigeration" style="width: 100%; height: 90%"></div>
            </dv-border-box-10>
          </div>
        </div>
        <!-- 第三行 -->
        <div class="content2" style="margin-top: 20px">
          <div class="border-box-content">
            <dv-border-box-13 ref="box1" >
              <span>能耗/产量数据图</span>
              <div ref='Energy' id="data" style="width: 100%; height: 90%"></div>
            </dv-border-box-13>
          </div>
          <div class="border-box-content-center">
            <dv-border-box-13 ref="box2">
              <span>能耗统计</span>
              <div class="consumption">
                <dv-active-ring-chart :config="config3" style="width:100%;height:100%" />
              </div>
              <div class="totalenergy">
                <div>
                  <span>本日能耗(KWH)</span>
                  <span>{{ yesterday }}</span>
                </div>
                <div style="margin-top: 20px">
                  <span>本月能耗(KWH)</span>
                  <span>{{ lastmonth }}</span>
                </div>
              </div>
            </dv-border-box-13>
          </div>
          <div class="border-box-content">
            <dv-border-box-13 ref="box3">
              <span>点检完成情况</span>
              <div id="check" style="width: 100%; height: 90%"></div>
            </dv-border-box-13>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import { defective, orderList, orderListing, energy, energyAll, waxpool, refrigeration, totaldata, checked, order, orderListTest } from "@/api/system/cockpit"
export default {
  data() {
    return {
      // 全屏显示
      isFullFlag: false,
      // 订单
      config1: {
        columnWidth: [], // 分别对应列宽
        align: "center", //文字对齐方式
        data: [],

      },
      config2: {
        header: ['wdr号', '零件号', '订单名称', '订单状态', '订单进度', '合格率'], //表头数据
        columnWidth: [400, 400, 600, 300, 500, 300],  // 分别对应列宽
        // columnWidth:[],
        align: "right", //文字对齐方式
        data: [],
        rowNum: 1,
        headerHeight: 40,
        headerBGC: '#244278', //表头
        oddRowBGC: 'rgba(0,0,0,0)', //奇数行
        evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行

      },
      // 能耗
      config3: {
        data: []
      },
      // 昨日能耗
      yesterday: '',
      // 上月能耗
      lastmonth: '',
      loading: false, //加载
      date: new Date().getTime(),
      // 质量问题数组
      defectiveList: [
        // {
        //   name: "蜡脏",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "灯芯偏",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "液面气泡不平整",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "胎膜破口",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "蜡杂质",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "其他",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        ],
      // 质量问题外层
      defectiveRes:{}
    }
  },
   computed: {
    // 获取侧边栏
    ...mapGetters(["sidebar"]),
    // 计算收缩菜单的变化
    isCollapse() {
      return this.sidebar.opened;
    },
  },
  watch: {
    isCollapse() {
      setTimeout(() => {
        this.$refs.order.initWH();
        this.$refs.box1.initWH();
        this.$refs.box2.initWH();
        this.$refs.box3.initWH();
        // this.Oil.resize();
        // this.Energy.resize();
        // this.$refs.circle.initChart()
        this.$refs.boxmini.forEach(item=>{
            item.initWH()
        })
      }, 300);
    },
  },
  mounted() {
    this.timer2 = setInterval(() => {
      this.List();
      //每五分更新一次页面数据
      // console.log('3miao');
      
    }, 300000);
    this.List();

    // 监听页面全屏
    // window.addEventListener("fullscreenchange", (e) => {
    //   if (screenfull.isFullscreen) {
    //     this.isFullFlag = true
    //   } else {
    //     this.isFullFlag = false
    //   }
    // });

  },
  created() {
    this.loadTime();
  },

  methods: {
    List() {
      this.getorderList();
      this.getEnergy();
      this.getOilList();
      this.cold();
      this.dataAll();
      this.check();
      this.getDefective()
    },
    clickFun() {
      this.isFullFlag = !this.isFullFlag
      const element = document.getElementById('content');//指定全屏区域元素
      if (this.isFullFlag) {
        // screenfull.request(element);
        element.requestFullscreen()
      } else {
        document.exitFullscreen();
      }
    },
    // 订单列表
    getorderList() {
      orderList().then(res => {
        // console.log(res);
        let orderAll = [];
        res.data.map(item => {
          // orderAll.push([item.wdr, item.partNo, item.orderDescribe, item.orderState, item.progress, item.yield])
          orderAll.push([item.wdr, item.partNo, item.orderDescribe, item.orderState, item.progress])
        });
        console.log(orderAll);
        this.config1 = {
          data: orderAll,
          // columnWidth: [], 
          columnWidth: [400, 400, 600, 300, 500],
          // columnWidth: [400, 400, 600, 300, 500, 300],

          // header: ['wdr号', '零件号', '订单名称','订单状态','订单进度','合格率'],
          align: "center",
          rowNum: 3,
          headerHeight: 40, //表头
          oddRowBGC: 'rgba(0,0,0,0)', //奇数行
          evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行
          waitTime: 15000
        }
      })
      orderListing().then(res => {
        let orderAll = [];
        res.data.map(item => {
          // orderAll.push([item.wdr, item.partNo, item.orderDescribe, item.orderState, item.progress, item.yield])
          orderAll.push([item.wdr, item.partNo, item.orderDescribe, item.orderState, item.progress])

        });
        this.config2 = {
          // header: ['wdr号', '零件号', '订单名称', '订单状态', '订单进度', '合格率'],
          header: ['wdr号', '零件号', '订单名称', '订单状态', '订单进度'],
          columnWidth: [400, 400, 600, 300, 500],
          // columnWidth: [400, 400, 600, 300, 500, 300],
          data: orderAll,


          // columnWidth:[],
          align: "center",
          rowNum: 1,
          headerHeight: 40,
          headerBGC: '#244278', //表头
          oddRowBGC: 'rgba(0,0,0,0)', //奇数行
          evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行
        }

      })
    },
    // 质量统计
    getDefective() {
      defective().then(res => {
        console.log(res);
        this.defectiveList = res.data.defectiveCounts
        this.defectiveRes=res.data
      })
    },
    // 每日能耗
    getEnergy() {
      // 能耗
      energy().then(res => {
        this.config3 = {
          data: res.data,
          radius: '60%',
          activeRadius: '65%',
          digitalFlopStyle: {
            fontSize: 20,
            fill: '#fff'
          }
        }
      });
      // 总计
      energyAll().then(res => {
        this.yesterday = res.data[0].consumption
        this.lastmonth = res.data[1].consumption
      })
    },
    // 蜡池温度
    getOilList() {
      waxpool().then(res => {
        let oil = echarts.init(document.getElementById('oil'))
        let option = {
          legend: {
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 10,
            top: '5',
            right: '30',
            data: ['一号蜡池(℃)', '二号蜡池(℃)', '三号蜡池(℃)', '四号蜡池(℃)', '五号蜡池(℃)'],
            textStyle: {
              fontSize: 14,
              color: '#a0a8b9'
            }
          },
          grid: {
            top: '46',
            left: '13%',
            right: '10',
            //bottom: '10%',
            containLabel: false
          },
          xAxis: [{
            type: 'category',
            axisLabel: {
              interval: 0,
              fontSize: 14
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#a0a8b9'
              }
            },
            axisTick: {
              show: false
            },
            data: res.data[0][1],
            offset: 10
          }],
          yAxis: [{
            type: 'value',
            name: '℃',
            nameGap: '2',
            min: 40,
            max: 100,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#a0a8b9'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#2b3646'
              }
            },
            axisTick: {
              show: false
            }
          }],
          "tooltip": {
            "trigger": "axis",
            transitionDuration: 0,
            backgroundColor: 'rgba(83,93,105,0.8)',
            borderColor: '#535b69',
            borderRadius: 8,
            borderWidth: 2,
            padding: [5, 10],
            formatter: function (params, ticket, callback) {
              var res = '';
              for (var i = 0, l = params.length; i < l; i++) {
                res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
              }
              return res;
            },
            axisPointer: {
              type: 'line',
              lineStyle: {
                type: 'dashed',
                color: '#ffff00'
              }
            }
          },
          series: [{
            name: '一号蜡池(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(137, 189, 27, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(137, 189, 27, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#1cc840'
              }
            },
            data: res.data[0][0]
          }, {
            name: '二号蜡池(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#eb5690'
              }
            },
            data: res.data[1][0]
          },
          {
            name: '三号蜡池(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(223,223,223, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(223,223,223, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#DFDFDF'
              }
            },
            data: res.data[2][0]
          },
          {
            name: '四号蜡池(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(229,244,19, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(229,244,19, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#E5F413'
              }
            },
            data: res.data[3][0]
          },
          {
            name: '五号蜡池(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(238,150,255, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(238,150,255, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#EE96FF'
              }
            },
            data: res.data[4][0]
          }]
        };
        option && oil.setOption(option);
      })
    },

    // 制冷系统
    cold() {
      refrigeration().then(res => {
        let cold = echarts.init(document.getElementById('refrigeration'))
        let option = {
          legend: {
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 10,
            top: '5',
            right: '120',
            data: ['制冷一(℃)', '制冷二(℃)', '制冷三(℃)'],
            textStyle: {
              fontSize: 14,
              color: '#a0a8b9'
            }
          },
          grid: {
            top: '46',
            left: '13%',
            right: '10',
            //bottom: '10%',
            containLabel: false
          },
          xAxis: [{
            type: 'category',
            axisLabel: {
              interval: 0,
              fontSize: 14
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#a0a8b9'
              }
            },
            axisTick: {
              show: false
            },
            data: res.data[0][1],
            offset: 10
          }],
          yAxis: [{
            type: 'value',
            name: '℃',
            nameGap: '2',
            min: 0,
            max: 30,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#a0a8b9'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#2b3646'
              }
            },
            axisTick: {
              show: false
            }
          }],
          "tooltip": {
            "trigger": "axis",
            transitionDuration: 0,
            backgroundColor: 'rgba(83,93,105,0.8)',
            borderColor: '#535b69',
            borderRadius: 8,
            borderWidth: 2,
            padding: [5, 10],
            formatter: function (params, ticket, callback) {
              var res = '';
              for (var i = 0, l = params.length; i < l; i++) {
                res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
              }
              return res;
            },
            axisPointer: {
              type: 'line',
              lineStyle: {
                type: 'dashed',
                color: '#ffff00'
              }
            }
          },
          series: [{
            name: '制冷一(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#AAFD2E',
              type: 'solid',
              width: 2
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(28,153,185, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(28,153,185, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#AAFD2E'
              }
            },
            data: res.data[0][0]
          }, {
            name: '制冷二(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#A18ECD',
              type: 'solid',
              width: 2
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(170,253,46, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(170,253,46, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#A18ECD'
              }
            },
            data: res.data[1][0]
          },
          {
            name: '制冷三(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#FD762E',
              type: 'solid',
              width: 2
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(253,118,46, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(253,118,46, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#FD762E'
              }
            },
            data: res.data[2][0]
          }]
        };
        option && cold.setOption(option);
      })
    },

    // 能耗与产量数据图
    dataAll() {
      totaldata().then(res => {
        console.log(res);
        let data = echarts.init(document.getElementById('data'))


        let option = {
          backgroundColor: "",
          legend: {
            x: '60%',
            y: '0%',
            left: '250',
            data: ['能耗(KWH)', '产能(个)', '蜡重(KG)'],
            textStyle: {
              color: '#9faeb5'
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            },
            data: res.data[3],
            axisLabel: {
              formatter: function (value) {
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 1; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) //如果类目项的文字大于3,
                {
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end);
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              },
              interval: 0,
              fontSize: 14,
              fontWeight: 100,
              textStyle: {
                color: '#9faeb5',

              }
            },
            axisLine: {
              lineStyle: {
                color: '#4d4d4d'
              }
            }
          },
          yAxis: [{
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            },

            axisLabel: {
              textStyle: {
                color: '#9faeb5',
                fontSize: 16,
              }
            },
            axisLine: {
              lineStyle: {
                color: '#4d4d4d'
              }
            },
            name: '能耗',
            nameGap: '20',
            nameTextStyle: {
              color: '#fff'
            },
          }, {
            type: 'value',
            // name: '产能',
            min: 0,
            max: 60000,
            position: 'right',
            axisLabel: {
              textStyle: {
                color: '#9faeb5',
                fontSize: 16,
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4d4d4d'
              }
            },
            name: '蜡重、产能',
            nameGap: '20',
            nameTextStyle: {
              color: '#fff'
            },
          }],
          "tooltip": {
            "trigger": "axis",
            transitionDuration: 0,
            backgroundColor: 'rgba(83,93,105,0.8)',
            borderColor: '#535b69',
            borderRadius: 8,
            borderWidth: 2,
            padding: [5, 10],
            formatter: function (params, ticket, callback) {
              var res = '';
              for (var i = 0, l = params.length; i < l; i++) {
                res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
              }
              return res;
            },
            axisPointer: {
              type: 'line',
              lineStyle: {
                type: 'dashed',
                color: '#ffff00'
              }
            }
          },
          series: [{
            name: '产能(个)',
            type: "bar",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00d386' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#0076fc' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                barBorderRadius: 15,
              }
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#ffc72b",
                  fontSize: 10
                }
              }
            },
            data: res.data[1],
            barWidth: 16,
          },
          {
            name: '蜡重(KG)',
            type: "bar",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#2652B4' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#5C3590' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                barBorderRadius: 15,
              }
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#ffc72b",
                  fontSize: 10
                }
              }
            },
            data: res.data[2],
            barWidth: 16,
          }, {
            name: '能耗(KWH)',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                /* color:'#c4cddc'*/
              }
            },
            data: res.data[0]
          }]
        };
        // window.onresize = function() {
        //   data.resize(); };
        window.addEventListener("resize", () => {
          data.resize();
          //此处写要处理的逻辑代码
        });
        option && data.setOption(option);
      })
    },

    // 点检情况
    check() {
      checked().then(res => {
        let data = echarts.init(document.getElementById('check'));

        let option = {
          legend: {
            x: '60%',
            y: '0%',
            left: '400',
            data: ['已完成', '应完成(25项)'],
            textStyle: {
              color: '#9faeb5'
            }
          },
          xAxis: [{
            type: 'category',
            data: res.data[1],
            legend: {
              x: '60%',
              y: '0%',
              textStyle: {
                color: '#9faeb5'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4d4d4d',
                width: 0,
                type: 'solid'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#9faeb5'
              }
            }
          }],
          yAxis: {
            type: 'value',
            name: '项',
            nameGap: '20',
            nameTextStyle: {
              color: '#fff'
            },
            min: 0,
            max: 35,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4d4d4d',
                width: 0,
                type: 'solid'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#9faeb5'
              },
            }
          },
          "tooltip": {
            "trigger": "axis",
            transitionDuration: 0,
            backgroundColor: 'rgba(83,93,105,0.8)',
            borderColor: '#535b69',
            borderRadius: 8,
            borderWidth: 2,
            padding: [5, 10],
            formatter: function (params, ticket, callback) {
              var res = '';
              for (var i = 0, l = params.length; i < l; i++) {
                res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
              }
              return res;
            },
            axisPointer: {
              type: 'line',
              lineStyle: {
                type: 'dashed',
                color: '#ffff00'
              }
            }
          },
          series: [
            {
              data: res.data[0],
              type: 'bar',
              name: '已完成',
              barWidth: 20,
              markLine: {
                lineStyle: {
                  normal: {
                    color: '#CEDAE7',
                  }
                },
                data: [{
                  yAxis: 25
                }]
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: '#fff'
                    }
                  },
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#9B43C8' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#422772' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  barBorderRadius: 15,
                }
              },
            }
          ]
        };
        // window.onresize = data.resize;
        //错误写法
        // window.onresize = ()=> {
        //   data.resize();
        // };

        //正确写法
        window.addEventListener("resize", () => {
          data.resize();
          //此处写要处理的逻辑代码
        });
        option && data.setOption(option);
      })
    },

    // 时间
    loadTime() {
         if(this.timer){
        clearInterval(this.timer)
      }   
     this.timer= setInterval(() => {
        this.date += 1000;
        // console.log(1);
      }, 1000);
    },
    // 转换时间戳
    formateTimeStamp(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      return (
        '<span style="font-size: 55px; float:left; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
        hour +
        ":" +
        minute + ":" + second +
        "</span>" +
        '<span style="font-size: 16px; display:inline-block; margin-top:8px; padding-left:10px">' +
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        '</span><br />' +
        "&nbsp;&nbsp;&nbsp;星期" +
        week
      );
    },
  },
   destroyed(){
    clearInterval(this.timer)
    clearInterval(this.timer2)

  }
}
</script>

<style scoped>
@import '../../../assets/styles/cockpitindex.scss';
</style>